<template>
  <div id="box">
    <div v-for="item in data" :key="item.index" class="movie">
      <p class="a">{{ item.index }}</p>
      <div v-for="it in item.movie" :key="it.id" class="b" @click="godetail(it.id)">
        <div class="left">
          <img v-lazy="it.img.replace('/w.h/', '/')" />
          <div class="details">
            <h4>{{ it.nm }}</h4>
            <p><span>{{it.wish}}</span> 人想看</p>
            <p>{{ it.cat }}</p>
            <p>{{ it.desc }}</p>
          </div>
        </div>
        <div class="right">
          <button class="btn">
            <span>预售</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      data: [],
    };
  },
  computed: {
    ...mapState("data", ["waits"]),
  },
  mounted() {
    this.getAllWaits();
    this.handleWaitList(this.waits);
  },
  methods: {
    ...mapActions("data", [
      "getAllWaits",
      "getDetail",
      "getCrews",
      "getComment",
    ]),
    handleWaitList(list) {
      let arr = [];
      let aaa = [];
      list.forEach((item) => {
        arr.push({ time: item.comingTitle });
      });
      function compare(p) {
        return function (m, n) {
          var a = m[p];
          var b = n[p];
          return a.localeCompare(b, "zh-CN", { numeric: true });
        };
      }
      arr.sort(compare("time"));
      arr.forEach((item) => {
        aaa.push(item.time);
      });
      function unique(array) {
        var n = [];
        for (var i = 0; i < array.length; i++) {
          if (n.indexOf(array[i]) == -1) n.push(array[i]);
        }
        return n;
      }
      let bbb = unique(aaa);
      for (let i = 0; i < bbb.length; i++) {
        let letter = list.filter((item) => {
          return item.comingTitle === bbb[i];
        });
        this.data.push({
          index: bbb[i],
          movie: letter,
        });
      }
    },
    
     godetail(Id) {
      this.getComment(Id);
      this.getCrews(Id);
      this.getDetail(Id);
      this.$router.push("/index/wait/" + Id);
    },
  },
};
</script>

<style scoped>
#box {
  background-color: #f5f5f5;
}
.movie {
  font-size: 0.14rem;
  
}
.movie .a {
  padding:0.1rem 0.15rem;
}
.b {
  display: flex;
  height: 1.2rem;
  border-bottom: 1px solid #ccc;
  background-color: white;
}
.left {
  width: 2.6rem;
  display: flex;
}
.left img {
  width: 0.8rem;
  height: 1rem;
  margin-top: 0.1rem;
  padding-left:0.15rem ;
}
.details {
  margin: 0.1rem 0 0 0.1rem;
}
.details h4 {
  width: 1.4rem;
  font-size: 0.15rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 0.09rem;
}
.details p {
  width: 1.4rem;
  font-size: 0.12rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 0.09rem;
  color: rgb(56, 51, 51);
}
.details p span{
  font-size: 0.14rem;
  color:#ff6e00;
}
.right {
  flex: 1;
  background-color: white;
  position: relative;
  margin-right: 0.03rem;
}

.btn {
  border-radius: 5px;
  width: 0.5rem;
  height: 0.3rem;
  background-color: #33bfff;
  color: #fff;
  position: absolute;
  top: 0.5rem;
  right: 0.1rem;
  font-size: 0.12rem;
}
</style>